<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-09 10:32:49
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-07-18 09:58:58
 * @Description: 应用配置
 -->
<template>
  <div id="auth" style="min-width: 704px; height: 100%">
    <fks-query-page
      v-loading="loadingClient"
      :table-name="LANG.CLIENT_LIST"
      :data="list"
      row-key="id"
      :page="false"
      :element-loading-text="LANG.LOADING"
      @sort-change="sortHandler"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-button
            v-permission="['client:add']"
            type="primary"
            icon="fks-icon-plus"
            @click="addClient"
          >
            <span> {{ LANG.ADD }}</span>
          </fks-button>
        </div>
      </template>
      <template>
        <fks-table-column type="index" align="center" label="#" />
        <fks-table-column
          :label="LANG.CLIENT_NAME"
          prop="clientName"
          sortable="custom"
          align="left"
          header-align="center"
        />
        <fks-table-column
          :label="LANG.REDIRECT_URL"
          prop="webServerRedirectUri"
          align="left"
          header-align="center"
        />
        <fks-table-column
          :label="LANG.CLIENT_ID"
          prop="clientId"
          align="left"
          header-align="center"
        />
        <fks-table-column :label="LANG.OPERATION" width="100" align="left">
          <template slot-scope="scope">
            <fks-button
              v-permission="['client:edit']"
              type="text"
              @click="edit(scope.row)"
            >
              {{ LANG.EDIT }}
            </fks-button>
            <fks-button
              v-permission="['client:delete']"
              danger-text
              @click="del(scope.row)"
            >
              {{ LANG.DELETE }}
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <client-detail
      v-if="visible"
      :type="type"
      :visible.sync="visible"
      :data.sync="node"
      @close="visible = false"
    />
  </div>
</template>

<script>
import { getClients, deleteClient } from '@/modules/SysConfig/Tenant/api'
import ClientDetail from '../ClientDetail/notSaas'
export default {
  name: 'Client',
  components: {
    ClientDetail
  },
  data() {
    return {
      type: 'add',
      loadingClient: false,
      visible: false,
      node: {},
      list: [],
      sort: '',
      columnName: ''
    }
  },
  mounted() {
    this.getClients()
  },
  methods: {
    //应用列表排序
    sortHandler(data) {
      let params = {}
      if (!data.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = data.order == 'ascending' ? 'asc' : 'desc'
        this.columnName = 'client_name'
      }
      params = {
        pageNo: 1,
        pageSize: 999,
        sort: this.sort,
        columnName: this.columnName
      }
      this.getClientList(params)
    },
    //打开新增应用弹窗
    addClient() {
      this.type = 'add'
      this.visible = true
    },
    //打开编辑应用弹窗
    edit(val) {
      this.node = {
        clientId: val.clientId,
        clientName: val.clientName,
        clientSecret: val.clientSecret,
        webServerRedirectUri: val.webServerRedirectUri,
        id: val.id
      }
      this.type = 'edit'
      this.visible = true
    },
    //删除应用
    del(val) {
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      })
        .then(() => {
          deleteClient(val.id)
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.DELETE_SUCCESS)
                this.getClients()
              }
            })
            .catch(() => {})
        })
        .catch(() => {})
    },
    //获取应用列表数据
    getClients() {
      this.list = []
      this.loadingClient = true
      let params = {
        pageNo: 1,
        pageSize: 999,
        sort: this.sort,
        columnName: this.columnName
      }
      this.getClientList(params)
    },
    getClientList(params) {
      getClients(params)
        .then((res) => {
          if (res.data && res.data.list) {
            this.list = res.data.list
          }
          this.loadingClient = false
        })
        .catch((err) => {
          this.loadingClient = false
          this.list = []
        })
    }
  }
}
</script>
<style scoped lang="scss">
</style>